關於 React 小書：使用 JSX 描述 UI

使用 JavaScript 描述 html

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

JavaScript createElement

createElement 会建立一個 JavaScript 对象来描述 HTML 的結構，包括標籤名、屬性、還有子元素等。這樣就變成合法的 JavaScript 程式碼。所以使用 React 和 JSX 的時候一定要經過編譯。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "React 小书"
        )
      )
    )
  }
}

// ReactDOM.render(
//   React.createElement(Header, null), 
//   document.getElementById('root')
// );

ReactDOM.render

編譯後 ReactDOM.render 構造真正的 DOM 元素，然后把 DOM 元素放到頁面上。

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById('root')
);

為何不是直接選染 DOM 構造，要經過中間一層

1. 不一定會把所有元素渲染到瀏覽器的頁面上，可能會渲染到 canvas 上，或是手機 App 上，這就是為何要把 react-dom 單獨抽離出來的原因。
2. 不用在頁面上操作 DOM，可減少瀏覽器重新渲染，優化性能。
   
   

總結

1. JSX 是 JavaScript 的一種語法延伸，長得像 HTML，非 XML，是類似 XML 的語法。
2. React.js 可以用 JSX 来描述 Component 長得如何。
3. JSX 在編譯的时候會變成相應的 JavaScript 描述。
4. react-dom 負責把這個用来描述 UI 信息的 JavaScript 對象變成 DOM 元素，並渲染到頁面上。
   
   

參考資源

• 使用 JSX 描述 UI 信息